<template>
  <div class="artDetails">
    <!-- 头部 -->
    <div class="header">
      <h1 class="title">{{data.title}}</h1>
      <div class="author">
        <div class="author-left">
          <div class="avatar">
            <img src="../assets/images/head.jpg" alt />
          </div>
          <div class="info">
            <p class="username">{{data.updateUser}}</p>
            <p class="mate">
              <span>查看 {{data.lookAt}}</span>
              <span>评论 {{data.commentNum}}</span>
              <span>赞 {{data.praise}}</span>
              <span>{{mate.updateAt}}</span>
            </p>
          </div>
        </div>
        <div class="tags">
          <span
            class="tag el-tag el-tag--success el-tag--mini"
            v-for="(item,index) in data.label"
            :key="index"
          >{{item}}</span>
        </div>
      </div>
    </div>
    <!-- 首图 -->
    <div class="banner">
      <img :src="data.banner" alt />
    </div>
    <!-- 内容 -->
    <!-- // 外边的两层div是必须要加的，里面的哪个div正常使用v-html指令后就可以正常显示 -->
    <div class="ql-container ql-snow">
      <div class="ql-editor">
        <div v-if="data.content" v-html="data.content"></div>
      </div>
    </div>
    <!-- <div class="main" v-html="data.content"></div> -->
    <!-- 点赞 -->
    <div class="zan">
      <span class="can" v-if="isZan" @click="dianzan">点赞</span>
      <span class="nocan" v-else @click="quxiaozan">取消赞</span>
    </div>
    <!-- 评论 -->
    <div class="comment">
      <el-input type="textarea" :rows="4" placeholder="请输入内容" v-model="textarea"></el-input>
      <el-button type="primary" class="submit" @click.native="submit">提交</el-button>
    </div>
    <!-- 评论列表 -->
    <div class="comment-list">
      <div class="top-title">{{commentList.length}} 条评论</div>
      <div class="item" v-for="(item,index) in commentList" :key="index">
        <div class="item-header">
          <div class="left">
            <img src="../assets/images/head.jpg" alt />
            <div class="user-info">
              <p class="name">
                {{item.userName}}
                <span v-if="data.updateUser == item.userName">(作者)</span>
              </p>
              <p class="time">{{item.creatTime}}</p>
            </div>
          </div>
          <div class="right">
            <el-button
              size="mini"
              type="danger"
              v-if="data.updateUser == loginUserName || loginUserId == item.userId"
              @click.native="deleteOne(item._id)"
            >删除</el-button>
          </div>
        </div>
        <div class="item-content">{{item.content}}</div>
        <el-button size="small" class="reply" @click="reply1(item._id)">回复</el-button>
        <div class="item2" v-for="(itm,inx) in item.children" :key="inx">
          <div class="item-header">
            <div class="left">
              <img src="../assets/images/head.jpg" alt />
              <div class="user-info">
                <p class="name">
                  {{itm.childUserName}}
                  <span v-if="data.updateUser == itm.childUserName">(作者)</span>
                </p>
                <p class="time">{{itm.creatTime}}</p>
              </div>
            </div>
            <div class="right">
              <el-button
                size="mini"
                type="danger"
                v-if="data.updateUser == loginUserName || loginUserId == itm.childUserId"
                @click.native="deleteTwo(item._id,itm._id)"
              >删除</el-button>
            </div>
          </div>
          <div class="item-content">
            <span class="itel" v-if="itm.replyId">
              @{{itm.replyUserName}}
              <span v-if="data.updateUser == itm.replyUserName">(作者)</span>：
            </span>
            {{itm.childContent}}
          </div>
          <el-button
            size="small"
            class="reply"
            @click="reply2(itm.childUserId,itm.childUserName,item._id)"
          >回复</el-button>
        </div>
      </div>
    </div>
    <!-- 评论弹窗 -->
    <el-dialog title="评论" :visible.sync="diaComment">
      <el-form>
        <el-input type="textarea" :rows="6" placeholder="请输入内容" v-model="reply.childContent"></el-input>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="diaComment = false">取 消</el-button>
        <el-button type="primary" @click="submitChild">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      textarea: "",
      id: this.$route.query.id,
      data: [],
      mate: {},
      isZan: true,
      reply: {
        childUserId: "",
        childUserName: "",
        childContent: "",
        replyId: "",
        replyUserName: ""
      },
      diaComment: false,
      commentList: [],
      commentId: "", //暂存回复评论的Id
      loginUserId: "", //登录的用户id
      loginUserName: "" //登录的用户姓名
    };
  },
  computed: {
    Login() {
      return this.$store.state.common.Login;
    }
  },
  watch: {
    Login(val) {
      if (val) {
        this.getZan();
        this.loginUserId = window.sessionStorage.getItem("id");
        this.loginUserName = window.sessionStorage.getItem("name");
      } else {
        this.isZan = true;
        this.loginUserId = "";
        this.loginUserName = "";
      }
    },
    immediate: true,
    deep: true
  },
  methods: {
    getList() {
      var that = this;
      that
        .$ajax({
          url: "/no/essayList/look?id=" + that.id
        })
        .then(
          res => {
            that.data = res.data.data;
            that.mate = res.data.data.mate;
          },
          res => {
            console.log(res);
          }
        );
    },
    // 查看登录用户是否对该文章点过赞
    getZan() {
      var that = this;
      if (!window.sessionStorage.getItem("id")) {
        return;
      }
      that
        .$ajax({
          url: "/api/zanLook",
          method: "post",
          data: {
            artId: that.id,
            authId: window.sessionStorage.getItem("id")
          }
        })
        .then(
          res => {
            if (res.data.code == 200) {
              that.isZan = !res.data.data.status;
            }
          },
          res => {
            console.log(res);
          }
        );
    },
    // 获取评论列表
    getComment() {
      var that = this;
      that.loginUserId = window.sessionStorage.getItem("id");
      that
        .$ajax({
          url: "/get/commentList?id=" + that.id
        })
        .then(
          res => {
            if (res.data.code == 200) {
              that.commentList = res.data.data;
            } else {
              that.$message({
                message: res.data.message,
                type: "warning"
              });
            }
          },
          res => {
            conosle.log(res);
          }
        );
    },
    // 点赞
    dianzan() {
      var that = this;
      if (!window.sessionStorage.getItem("id")) {
        that.$message({
          message: "请先登录",
          type: "warning"
        });
        return;
      }
      that
        .$ajax({
          url: "/api/addZan",
          method: "post",
          data: {
            artId: that.id,
            authId: window.sessionStorage.getItem("id"),
            status: true
          }
        })
        .then(
          res => {
            if (res.data.code == 200) {
              that.isZan = !res.data.data.status;
              that.getList();
              that.$message({
                message: "成功",
                type: "success"
              });
            }
          },
          res => {
            console.log(res);
          }
        );
    },
    // 取消赞
    quxiaozan() {
      var that = this;
      if (!window.sessionStorage.getItem("id")) {
        that.$message({
          message: "请先登录",
          type: "warning"
        });
        return;
      }
      that
        .$ajax({
          url: "/api/addZan",
          method: "post",
          data: {
            artId: that.id,
            authId: window.sessionStorage.getItem("id"),
            status: false
          }
        })
        .then(
          res => {
            if (res.data.code == 200) {
              that.isZan = !res.data.data.status;
              that.getList();
              that.$message({
                message: "成功",
                type: "success"
              });
            }
          },
          res => {
            console.log(res);
          }
        );
    },
    // 提交顶级评论
    submit() {
      var that = this;
      if (that.Login) {
        if (that.textarea == "") {
          that.$message({
            message: "请输入内容",
            type: "warning"
          });
          return;
        }
        var param = {
          artId: that.id,
          content: that.textarea,
          userId: window.sessionStorage.getItem("id"),
          userName: window.sessionStorage.getItem("name")
        };
        that
          .$ajax({
            url: "/api/addComment",
            method: "post",
            data: param
          })
          .then(
            res => {
              if (res.data.code == 200) {
                that.textarea = "";
                that.getList();
                that.getComment();
                that.$message({
                  message: res.data.message,
                  type: "success"
                });
              } else {
                that.$message({
                  message: res.data.message,
                  type: "warning"
                });
              }
            },
            res => {
              console.log(res);
            }
          );
      } else {
        that.$message({
          message: "请先登录",
          type: "warning"
        });
        return;
      }
    },
    // 一级回复
    reply1(id) {
      var that = this;
      that.commentId = id;
      that.reply.childUserId = window.sessionStorage.getItem("id");
      that.reply.childUserName = window.sessionStorage.getItem("name");
      that.diaComment = true;
    },
    // 二级回复
    reply2(replyId, replyUserName, id) {
      var that = this;
      that.commentId = id;
      that.reply.childUserId = window.sessionStorage.getItem("id");
      that.reply.childUserName = window.sessionStorage.getItem("name");
      that.reply.replyId = replyId;
      that.reply.replyUserName = replyUserName;
      that.diaComment = true;
    },
    // 提交子回复
    submitChild() {
      var that = this;
      if (that.Login) {
        if (that.reply.childContent == "") {
          that.$message({
            message: "请输入内容",
            type: "warning"
          });
          return;
        }
        that
          .$ajax({
            url: "/api/child/comment",
            method: "post",
            data: {
              children: that.reply,
              commentId: that.commentId
            }
          })
          .then(
            res => {
              if (res.data.code == 200) {
                that.diaComment = false;
                that.reply.childUserId = "";
                that.reply.childUserName = "";
                that.reply.childContent = "";
                that.reply.replyId = "";
                that.reply.replyUserName = "";
                that.getComment();
                that.$message({
                  message: res.data.message,
                  type: "success"
                });
              } else {
                that.$message({
                  message: res.data.message,
                  type: "warning"
                });
              }
            },
            res => {
              console.log(res);
            }
          );
      } else {
        that.$message({
          message: "请先登录",
          type: "warning"
        });
        return;
      }
    },
    // 删除一级评论
    deleteOne(commentId) {
      var that = this;
      that
        .$ajax({
          url: "/api/deleteFather",
          method: "delete",
          data: {
            artId: that.id,
            commentId: commentId
          }
        })
        .then(
          res => {
            if (res.data.code == 200) {
              that.getList();
              that.getComment();
              that.$message({
                message: res.data.message,
                type: "success"
              });
            } else {
              that.$message({
                message: res.data.message,
                type: "warning"
              });
            }
          },
          res => {
            console.log(res);
          }
        );
    },
    // 删除二级评论
    deleteTwo(idOne, idTwo) {
      var that = this;
      that
        .$ajax({
          url: "/api/deleteChildren",
          method: "delete",
          data: {
            fatherId: idOne,
            childrenId: idTwo
          }
        })
        .then(
          res => {
            if (res.data.code == 200) {
              that.getComment();
              that.$message({
                message: res.data.message,
                type: "success"
              });
            } else {
              that.$message({
                message: res.data.message,
                type: "warning"
              });
            }
          },
          res => {
            console.log(res);
          }
        );
    }
  },
  mounted() {
    this.getList();
    this.getZan();
    this.getComment();
    if (window.sessionStorage.getItem("id")) {
      this.loginUserName = window.sessionStorage.getItem("name");
      this.loginUserId = window.sessionStorage.getItem("id");
    } else {
      this.loginUserName = "";
      this.loginUserId = "";
    }
  }
};
</script>
<style scoped>
.artDetails {
  width: 100%;
}
/* header部分 */
.header .title {
  margin: 20px 0 0;
  text-align: center;
  font-size: 34px;
  font-weight: 700;
}
.header .author {
  margin: 30px 0 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.header .author .author-left {
  display: flex;
  align-items: center;
}
.header .author .author-left .avatar {
  width: 48px;
  height: 48px;
  margin-right: 15px;
}
.header .author .author-left .avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.header .author .author-left .info .username {
  font-size: 16px;
  font-weight: 700;
}
.header .author .author-left .info .mate {
  margin-top: 5px;
}
.header .author .author-left .info .mate span {
  margin-right: 10px;
  font-size: 12px;
  color: #666;
}
.header .tags span {
  margin-left: 5px;
}
/* 首图 */
.banner {
  width: 100%;
  text-align: center;
}
.banner img {
  width: 100%;
}
/* 内容 */
.main {
  margin-top: 20px;
}
/* 点赞 */
.zan {
  width: 100%;
  text-align: center;
  padding-top: 30px;
}
.zan .can {
  padding: 10px 20px;
  box-sizing: border-box;
  background-color: skyblue;
  color: #fff;
  cursor: pointer;
}
.zan .nocan {
  padding: 10px 20px;
  box-sizing: border-box;
  background-color: gray;
  color: #fff;
  cursor: pointer;
}
/* 评论 */
.comment {
  margin-top: 40px;
}
.comment .submit {
  margin-top: 15px;
}
/* 评论列表 */
.comment-list {
  text-align: left;
  margin-top: 30px;
  padding-top: 30px;
  position: relative;
  border-top: 1px solid #eee;
}
.comment-list .top-title {
  padding-bottom: 20px;
  font-size: 17px;
  font-weight: 700;
  border-bottom: 1px solid #f0f0f0;
}
.comment-list .item {
  width: 100%;
  padding: 20px 0px 30px;
  box-sizing: border-box;
  border-bottom: 1px solid #f0f0f0;
}
.comment-list .item .item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.comment-list .item .item-header .left {
  display: flex;
  align-items: center;
}
.comment-list .item .item-header img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  margin-right: 15px;
}
.comment-list .item .item-header .user-info .name {
  font-size: 16px;
  font-weight: 700;
}
.comment-list .item .item-header .user-info .time {
  font-size: 12px;
  margin-top: 5px;
}
.comment-list .item .item-content {
  font-size: 16px;
  color: #000;
  margin-top: 10px;
}
.comment-list .item .reply {
  margin-top: 10px;
}
.comment-list .item2 {
  margin-left: 30px;
  margin-top: 15px;
  border-left: 2px solid #cdcdcd;
  padding-left: 15px;
  box-sizing: border-box;
}
</style>


